<!--
 * @Author: byron
 * @Date: 2021-08-31 21:15:17
 * @LastEditTime: 2021-08-31 21:28:19
-->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 准备容器 -->
    <div id="test"></div>

    <!-- 引入必要的js库 -->
    <script type="text/javascript" src="../../lib/react.development.js"></script>
    <script type="text/javascript" src="../../lib/react-dom.development.js"></script>
    <!-- 引入babel库进行语法转化 -->
    <script type="text/javascript" src="../../lib/babel.min.js"></script>


    <script type="text/babel">
        class MyComponent extends React.Component{
         // 构造器  初始类的属性
         constructor(props){
             super(props);
             this.state = { ishot: true };
             this.change = this.change.bind(this)
         }
         showData = ()=>{
             alert(this.input1.value)
         }
         render(){
             console.log(this);
             return(
                 <div>
                 <input ref={(c)=>{this.input1 = c;console.log(c);}} type="text" placeholder="点击提示" />
                 <button onClick={this.showData}>点击我提示左侧数据</button>
                 </div>
             )
         }
         change(){
             console.log(this.state.ishot);
             this.state.ishot = !this.state.ishot
     }
     }
 ReactDOM.render(<MyComponent/>,document.getElementById("test"))
 </script>
</body>

</html>